<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #f5f5f5;
            font-family: 'Microsoft yahei';
        }
        div {
            display: inline-block;
        }
        .one {
            width: 300px;
            height: 480px;
            margin: 10px auto;
            background-color: white;
        }
        .one img {
            width: 100%;
            height: 300px;
        }
        .introduce {
            height: 30px;
            background-color: darkcyan;
            margin-top: 10px;
            font-size: 14px;
            color: #e4e4e4;
            /* text-align: center; */
            /* 因为这个段落没有sidth属性, 所以padding不会撑开盒子的 */
            padding: 10px 28px;
        }
        .comment {
            font-size: 12px;
            color: #e4e4e4;
            padding: 0 28px;
            margin-top: 20px;
        }
        h4 {
            display: inline-block;
            padding-left: 28px;
            margin-top: 20px;
            text-align: center;
            color: #202020;
            font-weight: 400;
        }
        .one em {
            font-style: normal;
        }
        .one span {
            color: #ff6700;
        }
    </style>
</head>
<body>
    <div class="one">
        <img src="images/jpg/小熊.jpg" alt="小熊.jpg">
        <p class="introduce">世界上最好的小熊呀世界上最好的小熊呀世界上最好的小熊呀</p>
        <p class="comment">来自于 1403018057的评价</p>
        <h4>小蠢熊</h4>
        <em>|</em>
        <span>99.9元</span>
    </div>
    <div class="one">
        <img src="images/jpg/xing.jpg" alt="小熊.jpg">
        <p class="introduce">世界上最好的小熊呀世界上最好的小熊呀世界上最好的小熊呀</p>
        <p class="comment">来自于 1403018057的评价</p>
        <h4>小蠢熊</h4>
        <em>|</em>
        <span>99.9元</span>
    </div>
</body>
</html>